<!DOCTYPE html>
<html>
<head>
	<title>猜字母游戏</title>
	<style type="text/css">
		*{padding:0px;margin:0px;}
		.canvasbox{width: 500px;height: 500px;margin:100px auto;}
	</style>
</head>
<body>
	<div class="canvasbox">
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
	</div>
	<script type="text/javascript" src="modernizr-custom.js"></script>
	<script type="text/javascript">
		window.addEventListener("load",eventWindowLoaded,false);
		function eventWindowLoaded(){
			canvasApp()
		}
		function canvasSupport(){
			return Modernizr.canvas;
		}
		function canvasApp(){
				if(!canvasSupport()){
					return false;
				}
				var canvas = document.getElementById("mycanvas");
		 		var context = canvas.getContext("2d");
		 				var alpha = 0;
						var fadeIn =true;
						var text = "欢迎您";
						var helloWorldImage = new Image();
						helloWorldImage.src = "ewm2.jpg"
		 		function drawScreen(){

		 				context.beginPath(); 
				 		// context.globalAlpha =1;
				 		// context.fiistyle ="#000";
				 		// context.fillRect(0,0,500,500);
				 		// 图像
				 		context.globalAlpha =0.25;
				 		context.fillRect(0,0,500,500);
				 		if(fadeIn){
				 			alpha = alpha + 0.1;
				 			if(alpha >= 1){
				 				alpha =1;
				 				fadeIn = false;
				 			}
				 		}else{
				 				alpha =alpha - 0.1;
				 				if(alpha<0){
				 					alpha =0;
				 					fadeIn = true;
				 				}
				 		}
				 			
				 			context.textBaseline = "top";
				 			context.globalAlpha = alpha;
				 			
				 			context.font = "72px 微软雅黑";
				 			context.strokeStyle = '#fff';
				 			context.fillText("恭喜您猜对了",100,10);
				 			context.closePath();
				}

						

						
				function gameLoop(){
					window.setTimeout(gameLoop,500);
					drawScreen()

				}
				gameLoop()
			
		}

		 // var guesses = 0;
		 // var message ="猜字母游戏";
		 // var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
		 // var today = new Date();
		 // var letterToGuess = "";
		 // var higherOrLower = "";
		 // var lettersGuessed = "";
		 // var gameOver = false;
		 // var canvas = document.getElementById("mycanvas");
		 // var context = canvas.getContext("2d");
		 // 为玩家初始化游戏
		// function initGame(){
		//  	letterToGuess = letters[Math.floor(Math.random()*letters.length)];
		//  	lettersGuessed = [];
		//  	gameOver = false;
		//  	window.addEventListener("keydown",eventKeyPressed,true);
		//  	drawScreen();
		//  }
		// function eventKeyPressed(e){
		// 	console.log(e);
		//  	if(!gameOver){
		//  		var letterPressed = String(e.key);
		//  		letterPressed = letterPressed.toLowerCase();
		//  		guesses++;
		//  		lettersGuessed.push(letterPressed);
		//  		if(letterPressed == letterToGuess){
		//  			gameOver = true;	
		//  		}else{
		//  			letterIndex = letters.indexOf(letterToGuess);
		//  			guessIndex = letters.indexOf(letterPressed);
		//  			if(guessIndex<0){
		//  				higherOrLower = "这不是一个字母";
		//  			}else if(guessIndex > letterIndex){
		//  				higherOrLower = "Lower";
		//  			}else{
		//  				higherOrLower = "Higher";
		//  			}
		//  		}
		//  		drawScreen();
		//  	}
		 	

		// }
		// function drawScreen(){
		// 	context.fillStyle = "#ffffaa";
		// 	context.fillRect(0,0,500,500);
		// 	context.strokeStyle = "#000";
		// 	context.strokeRect(5,5,490,490);
		// 	context.textBaseline = "top";
			
		// 	//消息
		// 	context.fillStyle = "#ff0000";
		// 	context.font = "16px 微软雅黑";
		// 	context.fillText("message",125,80);
		// 	// 猜测的次数
		// 	context.fillStyle = "#109910";
		// 	context.font = "16px arial";
		// 	context.fillText("微软雅黑："+guesses,125,50);
		// 	//显示Highrt或Lower
		// 	context.fillStyle = "#000";
		// 	context.font = "16px 微软雅黑";
		// 	context.fillText("友情提示："+higherOrLower,125,120);
		// 	if(gameOver){
		// 		context.fillStyle = "#ff0000";
		// 		context.font = "40px 微软雅黑";
		// 		context.fillText("恭喜您猜对了",125,250);
		// 	}
		// }
		// initGame();
		

		
	</script>
</body>
</html>